<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>持明法洲登录页面</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
		 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css"  media="all">
		 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/plugins/font-awesome-4.7.0/css/font-awesome.min.css"  media="all">
		<script src="${pageContext.request.contextPath}/layui/layui.js" type="text/javascript"></script>
		<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
		<script src="${pageContext.request.contextPath}/js/echarts.js"></script>
		<script src="${pageContext.request.contextPath}/js/china.js"></script>
	</head>
	<body class="layui-layout-body">
		<%--<div id="sex" style="width: 600px;height:400px;"></div>--%>
		<%--<div id="province" style="width: 600px;height:400px;"></div>--%>
		<%--<div id="aaa" style="width: 600px;height:400px;"></div>--%>
		<div class="layui-row">
			<div class="layui-col-xs3 layui-col-sm3 layui-col-md3" id="sex" style="width: 600px;height: 300px"></div>
			<div class="layui-col-xs3 layui-col-sm3 layui-col-md3" id="aaa" style="width: 600px;height: 300px"></div>
			<div class="layui-col-xs3 layui-col-sm3 layui-col-md3" id="province" style="width: 600px;height: 400px"></div>
		</div>

		<script>
			$.ajax({
				url:"/cmfz/user/selectAllCount"
				,success:function (result) {
					var sex = [];
					var count = [];
					$.each(result.count,function (i,obj) {
						sex.push(obj.sex)
						count.push(obj.count)
					})
					var myChart = echarts.init(document.getElementById('sex'));
					// 指定图表的配置项和数据
					var sex = {
						title: {
							text: '男女比例'
						},
						tooltip: {},
						legend: {
							data:['人数']
						},
						xAxis: {
							data: sex
						},
						yAxis: {},
						series: [{
							name: '人数',
							type: 'line',
							data: count
						}]
					};
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(sex);
				//	地区
					var myProvince = echarts.init(document.getElementById('province'));
					var province = {
						title:{
							text:'用户地区分布'
							,left:'center'
						},
						tooltip : {
							trigger: 'item'
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							data:['用户人数']
						},
						visualMap: {
							min: 0,
							max: 25000,
							left: 'left',
							top: 'bottom',
							text: ['高','低'],//取值范围的文字
							inRange: {
								color: ['#e0ffff', '#006edd']//取值范围的颜色
							},
							calculable : true,
							show:true//图注
						},
						geo: {
							map: 'china',
							roam: false,//不开启缩放和平移
							zoom:1.23,//视角缩放比例
							label: {
								normal: {
									show: true,
									fontSize:'10',
									color: 'rgba(0,0,0,0.7)'
								}
							},
							itemStyle: {
								normal:{
									borderColor: 'rgba(0, 0, 0, 0.2)'
								},
								emphasis:{
									areaColor: '#d3f3ee',//鼠标选择区域颜色
									shadowOffsetX: 0,
									shadowOffsetY: 0,
									shadowBlur: 20,
									borderWidth: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						},
						series : [
							{
								name: '信息量',
								type: 'map',
								geoIndex: 0,
								data:result.province
							}
						]
					};
					myProvince.setOption(province);
					// 注册
					var name = [];
					var value = [];
					$.each(result.register,function (i,obj) {
						name.push(obj.sex)
						value.push(obj.count)
					})
					// 基于准备好的dom，初始化echarts实例
					var myDay = echarts.init(document.getElementById('aaa'));

					// 指定图表的配置项和数据
					var day = {
						title: {
							text: '注册时间'
						},
						tooltip: {},
						legend: {
							data:['数量']
						},
						xAxis: {
							data: name
						},
						yAxis: {},
						series: [{
							name: '数量',
							type: 'line',
							data: value
						}]
					};
					// 使用刚指定的配置项和数据显示图表。
					myDay.setOption(day);
				}
			})
		</script>
	</body>
</html>
